<template>
  <div id="app">
    <el-form ref="form" :model="form" label-width="80px" :inline="true" :rules="rules" >
      <el-form-item label="题目名称" prop="topicName"  >
        <el-input v-model="form.topicName" placeholder="请输入题目名称" style="width: 500px"  maxlength="100" show-word-limit />
      </el-form-item>
      <el-form-item label="题型" prop="questionType" >
        <el-select v-model="form.questionType" placeholder="请选择题型" style="width: 500px">
          <el-option label="单选题" value="单选题"></el-option>
          <el-option label="多选题" value="多选题"></el-option>
        </el-select>
      </el-form-item>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" @click="addAnswer">新增答案</el-button>
        </el-col>
      </el-row>

      <el-table :data="form.questionnaireAnswersList" style="width: 800px;" >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="solutionName" label="答案" width="500">
          <template slot-scope="scope">
            <el-input v-model="scope.row.solutionName" placeholder="请输入答案"  maxlength="50" show-word-limit/>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="分值" width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.score" placeholder="请输入分值" type="number" pattern="[0-9]*" :min="0"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <div style="padding-left: 10px; margin-left: -10px;">
              <el-button type="danger" icon="el-icon-delete" @click="deleteRow(scope.$index)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="dialog-footer" style="margin-top: 15px">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel(questionnaireId)">关 闭</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { listTitle, getTitle, delTitle, addTitle, updateTitle } from "@/api/questionnaire/title";
export default {
  name: "saveTitle",
  props:{
    topicId:{
      type: String,
      default: null
    },
    questionnaireId:{
      type: String,
      default: null
    }
  },
  created() {
    this.reset();
    console.log("第一次执行")
    if (this.topicId!==null){
      console.log(this.topicId)
     this.getList();
    }
  },

  data() {
    return {
      dialogVisible: false,
      form: {
        questionnaireAnswersList: [],
      },
      rules: {
        topicName: [
          { required: true, message: '请输入题目名称', trigger: 'blur' }
          // 可以根据需要添加其他校验规则
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
      }
    };
  },
  methods: {
    getList(){
      getTitle(this.topicId).then(res=>{
        console.log(res)
        this.form=res.data;
      })
    },
    addAnswer() {
      if (this.topicId!==null){
        this.form.questionnaireAnswersList.push({ solutionName: '', score: 0,topicId:this.topicId });
      }else {
        this.form.questionnaireAnswersList.push({ solutionName: '', score: 0});
      }
    },
    deleteRow(index) {
      this.form.questionnaireAnswersList.splice(index, 1);
    },
    // 表单重置
    reset() {
      this.form = {
        topicName: null,
        questionType: null,
        questionnaireAnswersList:[],
      };
      this.resetForm("form");
    },
    submitForm(){
      this.$refs["form"].validate(valid => {
        if (valid){
          // 新增校验：所有答案的solutionName不能为空
          const emptyAnswer = this.form.questionnaireAnswersList.find(item => !item.solutionName || item.solutionName.trim() === '');
          if (emptyAnswer) {
            this.$message.error("所有答案内容不能为空，请完善后再提交！");
            return;
          }
          console.log(this.topicId)
          if (this.topicId!==null){
            //修改
            this.form.questionnaireId=this.questionnaireId;
            updateTitle(this.form).then(res=>{
              if (res.code===200){
                this.$message.success("修改成功");
                this.reset();
                this.cancel(this.questionnaireId);
              }else {
                this.$message.error(res.msg);
              }
            })
          }else {
            if (this.form.questionnaireAnswersList.length>0){
              this.form.questionnaireId=this.questionnaireId;
              addTitle(this.form).then(res=>{
                this.$message.success("新增成功");
                this.reset();
                this.cancel(this.questionnaireId);
              })
            }else {
              this.$message.error("至少添加一条答案内容!");
            }
          }
        }
      });
    },
    cancel(questionnaireId){
      console.log("准备返回的id:"+questionnaireId)
      this.$emit('change',questionnaireId);
    },
  },
};
</script>

<style scoped lang="scss">
/* 样式可以根据需要进行调整 */
#app {
  text-align: center;
  margin-top: 60px;
}
</style>
